<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>章节列表-小说搜搜-免费且无广告的小说阅读网</title>

<!-- 使用网站图标：一般站长的做法，就是将网站图标文件favicon.ico放到网站根目录，就不管了。
其实，为了更好的兼容性，正确的做法应该是在header添加如下的META申明： -->
<link rel="icon" href="/icon/favicon-2017080708144388.ico">
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" />
<script src="/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/js/JSON-js-master/json2.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<!-- Base64是一种基于64个可打印字符来表示二进制数据的表示方法。
Base64常用于在通常处理文本数据的场合，表示、传输、存储一些二进制数据。包括MIME的email，email via MIME, 在XML中存储复杂数据。
Base64其实是一种简单的置换加密方式，但是BASE64的用处往往并不是为了防止信息泄露，而且为了方便传输，进过BASE64编码后的信息会比原始信息长，大概是4/3倍。 -->
<script src="/js/jquery.base64.js"></script>
<style>
.jumbotron {
	padding-top: 10px;
	padding-bottom: 10px;
}
</style>
</head>
<body>
	<div class="jumbotron">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<a href="./">回到搜索页</a>					
				</div>
			</div>
		</div>
	</div>
	<div class="container no-table-responsive">
		<table class="table table-striped table-bordered table-condensed table-hover">
			<thead>
				<tr>
					<!-- colspan="4"：占4列 长度-->
					<th colspan="4" style="text-align: center;" >章节列表</th>
				</tr>
			</thead>
			<tbody id="chapterList">
				<%-- <c:forEach items="${chapters }" var="chapter">
					<tr>
						<td>
							<a href="./chapterDetail?url=${chapter.url }&baseUrl=${baseUrl }">${chapter.title }</a>
						</td>
					</tr>
				</c:forEach> --%>
			</tbody>
		</table>
	</div>
	<!-- 用来传递域中的值到js,使用html()来获取:成功 -->
	<span id="param_chapters" hidden="true">${chapters}</span>
	<span id="param_baseUrl" hidden="true">${baseUrl}</span>
	<!-- 获取失败 -->
	<%-- <input type="text" id="param_chapters"  value="${chapters}" > --%>
	<script>
	$(function() {
		appendString();
	})
	function appendString() {		
		//先清空表格
		$("#chapterList").html("");
		//再拼接表格
		var count=0;		
		var pcs=$("#param_chapters").html()		
		var baseUrl=$("#param_baseUrl").html()		
		console.log(pcs);
		/*运用时候需要除了eval()以外需要json2.js包（切记哦）
		将json字符串转换为json对象的方法。在数据传输过程中，json是以文本，即字符串的形式传递的，
		而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键
		例如：
		JSON字符串:
		var str1 = '{ "name": "cxh", "sex": "man" }'; 
		JSON对象:
		var str2 = { "name": "cxh", "sex": "man" };
		一、JSON字符串转换为JSON对象
		要使用上面的str1，必须使用下面的方法先转化为JSON对象：
		//由JSON字符串转换为JSON对象
		var obj = eval('(' + str + ')');
		或者
		var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
		或者
		var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
		然后，就可以这样读取：
		Alert(obj.name);
		Alert(obj.sex);
		特别注意：如果obj本来就是一个JSON对象，那么使用eval（）函数转换后（哪怕是多次转换）还是JSON对象，
		但是使用parseJSON（）函数处理后会有问题（抛出语法异常）。
		二、可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串。
		例如：
		var last=obj.toJSONString(); //将JSON对象转化为JSON字符
		或者
		var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
		alert(last);
		注意：
		上面的几个方法中，除了eval()函数是js自带的之外，其他的几个方法都来自json.js包。新版本的 JSON 修改了 API，
		将 JSON.stringify() 和 JSON.parse() 两个方法都注入到了 Javascript 的内建对象里面，
		前者变成了 Object.toJSONString()，而后者变成了 String.parseJSON()。
		如果提示找不到toJSONString()和parseJSON()方法，则说明您的json包版本太低。
		*/
		//把json字符串转为json对象,运用时候需要除了eval()以外需要json.js包（切记哦）
		console.log(typeof(pcs));
		console.log("----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------");
		//[Object { title="第1章 意外的穿越", url="http://www.bxwx9.org/b/192/192586/33974851.html"}, Object { title="第2章 储物空间", url="http://www.bxwx9.org/b/192/192586/33974855.html"}]
		//var pcsJsonObject =  eval('(' + pcs + ')');
		var pcsJsonObject = JSON.parse(pcs);
		//json对象:Object { id=1008, name="欧皇的世界穿越之旅", author="楚韵依然", 更多...}, Object { id=1267, name="时空之穿越者", author="新人上路", 更多...}, 
		console.log(typeof(pcsJsonObject));
		console.log(pcsJsonObject);
		console.log("----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------");
		var $pcsJsonObject=$(pcsJsonObject);
		//jquery对象：Object[Object { id=1008, name="欧皇的世界穿越之旅", author="楚韵依然", 更多...}, Object { id=1267, name="时空之穿越者", author="新人上路", 更多...}, 
		console.log($pcsJsonObject);
		var tr ="";
 		$pcsJsonObject.each(function(index,chapter){
 		//for循环是对数组的元素进行循环，而不能引用于非数组对象。
 		//for(var chapter in pcsJsonObject){ 
			console.log("foreach");
			console.log(chapter);
 			count=count+1;
			//这里的$tr和$("html")是什么含义，为什么不直接写成tr和"html"
			//这是jquery的用法$("标签")，相当于创建一个标签，然后再append拼接到标签里面
			//这种写法表示jquery对象，使用jquery的方法对应参数要是jquery对象
			//定义为4列显示
			if(count%4==1){
				//为了能返回章节列表，所以要把baseUrl传递出去
				tr = tr+"<tr><td><a href='./chapterDetail?url=" + chapter.url + "&baseUrl=" + baseUrl + "'>"+chapter.title+"</a></td>";				
			}else if(count%4==0){
				tr = tr+"<td><a href='./chapterDetail?url=" + chapter.url + "&baseUrl=" + baseUrl + "'>"+chapter.title+"</a></td></tr>";				
			}else{
				tr = tr+"<td><a href='./chapterDetail?url=" + chapter.url + "&baseUrl=" + baseUrl + "'>"+chapter.title+"</a></td>";								
			}
			//console.log($tr);
		});
		$("#chapterList").append($(tr));
 		
	}

	</script>
</body>
</html>